<template>
  <div
    style="
      
      width: 100%;
      height: 100%;
      border-radius: 24px;
      background-color: #fff;
      display: flex;
      flex-direction: column;
    "
  >
    <div
      style="
        height: 71px;
        width: 100%;
        border-bottom: #f1f7ff solid 2px;
        display: flex;
        align-items: center;
      "
    >
      <div
        style="
          margin-left: 33px;
          width: 5px;
          height: 19px;
          background-color: #3f8cff;
          border-radius: 3px;
        "
      ></div>
      <div style="font-size: 22px; font-weight: normal; margin-left: 11px">
        {{ content1 }}
      </div>
    </div>
    <div
      style="
        width: 100%;
        flex: 1;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
      "
    >
      <div style="width: 1000px; display: flex; align-items: center">
        <div style="width: 150px; text-align: right; padding-right: 10px">
          {{ content2 }}
        </div>
        <el-input v-model="roleForm.roleNameCn" style="flex: 1"></el-input>
      </div>
      <div
        style="
          width: 1000px;
          display: flex;
          align-items: start;
          margin-top: 30px;
        "
      >
        <div style="width: 150px; text-align: right; padding-right: 10px">
          {{ content3 }}
        </div>
        <div
          style="
            flex: 1;
            display: flex;
            flex-direction: column;
            align-items: center;
            height: 500px;
            border: 1px solid #d8e0f0;
            border-radius: 14px;
          "
        >
          <div style="width: 95%; display: flex;margin:10px 0;">
            <el-checkbox
              v-model="permissionForm.commandControll"
              style="
                width: 25%;
                margin-right: 0;
                display: flex;
                justify-content: left;
              "
              >指令控制</el-checkbox
            >
            <el-checkbox
              v-model="permissionForm.systemControll"
               style="
                width: 25%;
                margin-right: 0;
                display: flex;
                justify-content: left;
              "
              >系统控制</el-checkbox
            >
            <el-checkbox
              v-model="permissionForm.materialControll"
               style="
                width: 25%;
                margin-right: 0;
                display: flex;
                justify-content: left;
              "
              >素材控制</el-checkbox
            >
            <el-checkbox
              v-model="permissionForm.taskControll"
               style="
                width: 25%;
                margin-right: 0;
                display: flex;
                justify-content: left;
              "
              >任务管理</el-checkbox
            >
          </div>
          
          
         
          <div style="width: 95%; display: flex">
            <el-checkbox
              v-model="permissionForm.pageControll"
              style="
                width: 25%;
                margin-right: 0;
                display: flex;
                justify-content: left;
              "
              >页面控制</el-checkbox
            >
            <el-checkbox
              v-model="permissionForm.UserSetting"
              style="
                width: 25%;
                margin-right: 0;
                display: flex;
                justify-content: left;
              "
              >{{ content10 }}</el-checkbox
            >
            <el-checkbox
              v-model="permissionForm.PermissionSetting"
              style="
                width: 25%;
                margin-right: 0;
                display: flex;
                justify-content: left;
              "
              >{{ content11 }}</el-checkbox
            >
          </div>
        </div>
      </div>

      <div
        style="
          width: 300px;
          display: flex;
          justify-content: space-between;
          margin-top: 50px;
        "
      >
        <el-button
          @click="clearUp"
          type="primary"
          style="
            width: 100px;
            height: 48px;
            background: #e6edf5;
            color: black;
            border-radius: 24px;
            box-shadow: 0px 6px 12px 0px rgba(63, 140, 255, 0.26);
          "
          >{{ content14 }}</el-button
        >

        <el-button
          type="primary"
          @click="submitNewRole"
          style="
            height: 48px;
            background: #3f8cff;
            border-radius: 24px;
            box-shadow: 0px 6px 12px 0px rgba(63, 140, 255, 0.26);
          "
          >{{ content15 }}</el-button
        >
      </div>
    </div>
  </div>
</template>

<style scoped>
.ElementForm >>> .el-form-item__content {
  margin-left: 0px !important;
}
</style>

<script>
import request from "../axios/request";
export default {
  data() {
    return {
      roleForm: {
        roleNameCn: null,
      },
      permissionForm: {
        commandControll:false,
        systemControll:false,
        materialControll:false,
        taskControll:false,
        pageControll:false,
        UserSetting:false,
        PermissionSetting:false,
      },
      roleId: null,
      content1: "添加用户权限组",
      content2: "用户权限名称",
      content3: "选择权限",
      content4: "查找设备",
      content5: "资产管理模块",
      content6: "设备信息录入管理",
      content7: "保养耗材更换登记",
      content8: "设备维护记录",
      content9: "后台设置",
      content10: "用户设置",
      content11: "权限设置",
      content12: "供应商设置",
      content13: "保养耗材更换提醒",
      content14: "清空",
      content15: "保存",
    };
  },
  mounted() {
    this.roleId = this.$route.params.id;
    if (this.roleId != -1) {
      this.getRoleDetailByRoleId();
    }
  },
  methods: {
    changeLanguage() {
      if (language == "简体中文") {
        this.content1 = "添加用户权限组";
        this.content2 = "用户权限名称";
        this.content3 = "选择权限";
        this.content4 = "查找设备";
        this.content5 = "资产管理模块";
        this.content6 = "设备信息录入管理";
        this.content7 = "保养耗材更换登记";
        this.content8 = "设备维护记录";
        this.content9 = "后台设置";
        this.content10 = "用户设置";
        this.content11 = "权限设置";
        this.content12 = "供应商设置";
        this.content13 = "保养耗材更换提醒";
        this.content14 = "清空";
        this.content15 = "保存";
      } else if (language == "English") {
        this.content1 = "Add User Permission Group";
        this.content2 = "User Permission Name";
        this.content3 = "Select Permissions";
        this.content4 = "Search Devices";
        this.content5 = "Asset Management Module";
        this.content6 = "Device Information Entry Management";
        this.content7 = "Maintenance and Consumable Replacement Registration";
        this.content8 = "Device Maintenance Records";
        this.content9 = "Backend Settings";
        this.content10 = "User Settings";
        this.content11 = "Permission Settings";
        this.content12 = "Supplier Settings";
        this.content13 = "Maintenance and Consumable Replacement Reminder";
        this.content14 = "Clear";
        this.content15 = "Save";
      } else {
        this.content1 = "添加用戶權限組";
        this.content2 = "用戶權限名稱";
        this.content3 = "選擇權限";
        this.content4 = "查找設備";
        this.content5 = "資產管理模組";
        this.content6 = "設備資訊錄入管理";
        this.content7 = "保養耗材更換登記";
        this.content8 = "設備維護記錄";
        this.content9 = "後臺設置";
        this.content10 = "用戶設置";
        this.content11 = "權限設置";
        this.content12 = "供應商設置";
        this.content13 = "保養耗材更換提醒";
        this.content14 = "清空";
        this.content15 = "保存";
      }
    },
    async getRoleDetailByRoleId() {
      let resOfGetRoleDetailByRoleId = await request({
        url: "/role/api/getRoleDetailByRoleId/" + this.roleId,
        method: "GET",
      });
      if (resOfGetRoleDetailByRoleId.data.status == 200) {
        console.log("获取结果成功");
        this.roleForm.roleNameCn =
          resOfGetRoleDetailByRoleId.data.data.roleNameCn;
        let permissions = resOfGetRoleDetailByRoleId.data.data.permissions;
        for (let index = 0; index < permissions.length; index++) {
          const element = permissions[index];
          this.permissionForm[element.permissionNameEn] = true;
        }
      }
    },
    clearUp(e) {
      this.roleForm.roleNameCn = null;
      this.permissionForm = {
        searchDevice: false,
        deviceManagement: false,
        MCRManagement: false,
        EMRManagement: false,
        UserSetting: false,
        PermissionSetting: false,
        SupplierSetting: false,
        MCRReminderSetting: false,
      };
    },
    changeStatus(e) {
      console.log(e);
    },
    async submitNewRole() {
      if (this.roleId == -1) {
        let resOfSubmitNewRole = await request({
          url: "/user/api/submitNewPermission?userId=" + this.roleForm.roleNameCn,
          method: "POST",
          data: this.permissionForm,
        });
        if (resOfSubmitNewRole.data.status == 200) {
          this.$message({
            message: "保存成功",
            type: "success",
          });
          this.$router.go(-1);
        }
      } else {
        let resOfUpdateRole = await request({
          url:
            "/role/api/updateRoleByRoleId/" +
            this.roleForm.roleNameCn +
            "/" +
            this.roleId,
          method: "PUT",
          data: this.permissionForm,
        });
        if (resOfUpdateRole.data.status == 200) {
          this.$message({
            message: "保存成功",
            type: "success",
          });
        }
      }
    },
  },
};
</script>